<template>
    <Tabs class="container" :value="tab.value">
      <Tab-pane label="菜单" name="menu">
        <div class="tool-wrap">
          <Button-group class="rf">
            <i-button type="ghost" icon="plus" class="tool-btn" @click="showModalDialog(null, {id: 0, parent_path: ''})">增加顶级菜单</i-button>
            <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteMenus(checkIds)">批量删除菜单</i-button>
          </Button-group>
        </div>
        <tree-grid
          ref="menuTree"
          :columns="columns"
          :items="menuTree"
          @on-row-click="rowClick"
          @on-selection-change='selectionClick'>

        </tree-grid>
      </Tab-pane>
      <Modal v-model="menuModal.show"
             :title="menuModal.title"
             :loading = "menuModal.loading"
             @on-ok = "saveMenu"
             ok-text="保存"
             cancel-text="关闭">
        <i-form :ref="menuModal.formName" :model="menuModal.formData" :rules="menuModal.rules" :label-width="120">
          <Form-item label="菜单标题" prop="title">
            <i-input v-model="menuModal.formData.title" placeholder="输入菜单标题"/>
          </Form-item>
          <Form-item label="地址" prop="url">
            <i-input v-model="menuModal.formData.url" placeholder="请输入地址"/>
          </Form-item>
          <Form-item label="图标" prop="icon">
            <i-input v-model="menuModal.formData.icon" placeholder="请输入图标"/>
          </Form-item>
          <Form-item label="排序" prop="sort">
            <i-input v-model="menuModal.formData.sort" placeholder="请输入顺序"/>
          </Form-item>
        </i-form>
      </Modal>
    </Tabs>
</template>
<script>
  import menuApi from '../../../api/admin/menu'
  import TreeGrid from '../../../components/treeGrid.vue'
  import {isConfirm} from '../../../assets/admin/js/common'

  let treeToList = (treeList, ids = []) => {
    treeList.forEach(item => {
      ids.push(item.id)
      if (item.children.length !== 0) {
        treeToList(item.children, ids)
      }
    })
  }

  let emptyMenuForm = {
    id: 0,
    parent_id: 0,
    title: '',
    icon: 'gear-b',
    sort: 1,
    url: '',
    parent_path: ''
  }
  export default{
    components: {
      'tree-grid': TreeGrid
    },
    data () {
      return {
        menuModal: {
          show: false,
          loading: false,
          title: '创建顶级菜单',
          formName: 'menuForm',
          formData: {...emptyMenuForm},
          rules: {
            title: [
              {required: true, message: '请填写菜单名', trigger: 'blur'}
            ],
            url: [
//              {required: true, message: '请填写地址', trigger: 'blur'}
            ],
            icon: [
              {required: true, message: '请填写图标', trigger: 'blur'}
            ],
            sort: [
              {required: true, message: '请填写顺序', trigger: 'blur'}
            ]
          }
        },
        tab: {
          value: 'menu'
        },
        columns: [
          {
            type: 'selection',
            width: '20'
          },
          {
            title: '菜单标题',
            key: 'title'
          },
          {
            title: '页面地址',
            key: 'url'
          },
          {
            title: '图标',
            key: 'icon'
          },
          {
            title: '排序',
            key: 'sort'
          },
          {
            title: '操作',
            type: 'action',
            actions: [{
              type: 'text',
              tipContent: '增加子菜单',
              text: '增加子菜单',
              icon: 'plus'
            }, {
              type: 'text',
              tipContent: '编辑菜单',
              text: '编辑菜单',
              icon: 'edit'
            }, {
              type: 'text',
              tipContent: '删除菜单',
              text: '删除菜单',
              icon: 'trash-a'
            }]
          }
        ],
        menuTree: [],
        checkIds: []
      }
    },
    methods: {
      showModalDialog (menu, parent) {
        this.menuModal.formData = {...emptyMenuForm}
        let formData = this.menuModal.formData
        if (menu) {
          Object.assign(formData, menu)
          delete formData.children
        } else {
          formData.parent_id = parent.id
          formData.parent_path = parent.parent_path + '/' + parent.id
        }
        this.menuModal.show = true
      },
      rowClick (data, event, index, text) {
        let self = this
        switch (text) {
          case '增加子菜单':
            self.menuModal.title = text
            self.showModalDialog(null, data)
            break
          case '编辑菜单':
            self.menuModal.title = text
            self.showModalDialog(data)
            break
          case '删除菜单':
            let menuIds = []
            treeToList([data], menuIds)
            self.deleteMenus(menuIds)
            break
        }
      },
      selectionClick (arr) {
        this.checkIds = arr
      },
      getMenuTree () {
        let self = this
        menuApi.getMenuTree(data => {
          self.menuTree = data
        })
      },
      saveMenu () {
        let self = this
        let formData = {}
        for (let field in emptyMenuForm) {
          formData[field] = self.menuModal.formData[field]
        }
        menuApi.saveMenu(formData, () => {
          this.getMenuTree()
        })
      },
      deleteMenus (menuIds) {
        let self = this
        if (menuIds.length === 0) {
          return
        }
        isConfirm(`删除菜单？`, () => {
          menuApi.deleteMenus(menuIds, () => {
            self.$Message.success(`删除菜单成功！`)
            self.getMenuTree()
            self.checkIds = []
          })
        })
      }
    },
    created () {
      this.getMenuTree()
    }
  }
</script>
<style lang="less">
</style>
